<template>
  <div class="proDe">
    <div class="pro-desc">
      <div class="pro-name">
        <h3>{{ info.store_name }}</h3>
        <!-- //todo -->
        <div class="pro-label">
          <a>塑料瓶</a>
          <a>塑料</a>
          <a>分装</a>
        </div>
      </div>
      <div class="content">
        <show-image :pics="info.slider_image" />
        <div class="desc">
          <p class="pro-number">产品编号：{{ info.product_code || '无' }}</p>
          <div class="pro-features clearfix">
            <div class="feature cursor">
              <a v-print>
                <img src="~/assets/images/print.png" alt="" />
                打印
              </a>
            </div>
            <div class="feature cursor" v-clipboard:copy="url" v-clipboard:success="onCopy" v-clipboard:error="onError">
              <a>
                <img src="~/assets/images/share.png" alt="" />
                分享
              </a>
            </div>
            <div class="feature cursor" @click="collect">
              <a v-if="!info.is_hide_product">
                <van-icon name="like" color="#969696" size="22" />
                <span>收藏</span>
              </a>
              <a v-else>
                <van-icon name="like" color="#E38B2B" size="22" />
                <span>已收藏</span>
              </a>
            </div>
          </div>
          <p>产品价格（单位 Pc)</p>
          <p class="discount-time" v-if="info.zhekou && info.zhekou.start_time">折扣时间：{{ `${info.zhekou.start_time} - ${info.zhekou.end_time}` }}</p>
          <div class="table-box">
            <table border="0" cellpadding="0" cellspacing="0">
              <thead>
                <tr>
                  <th>数量</th>
                  <th>
                    价格
                    <span v-if="info.zhekou && info.zhekou.start_time">（原价/折扣价）</span>
                  </th>
                  <th>交期</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in info.zhekou && info.zhekou.ladder_json" :key="index">
                  <td>{{ item.num }}-{{ item.max_num }}</td>
                  <td class="price" v-if="info.zhekou && info.zhekou.discounts">
                    <span>￥{{ item.price }}</span>
                    /￥{{ item.discounts }}
                  </td>
                  <td v-else>
                    <span>￥{{ item.price }}</span>
                  </td>
                  <td>{{ item.day }}天</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pro-features pro-features2">
            <div class="feature featfont">
              <!-- v-if="info.details_cate.indexOf(1) !== -1" -->
              <img src="~/assets/images/icon1.png" alt="" />
              免费样品
            </div>
            <div class="feature featfont">
              <!-- v-if="info.details_cate.indexOf(2) !== -1" -->
              <img src="~/assets/images/icon2.png" alt="" />
              库存有现货
            </div>
            <div class="feature featfont">
              <!-- v-if="info.details_cate.indexOf(3) !== -1" -->
              <img src="~/assets/images/icon3.png" alt="" />
              支持PCR
            </div>
            <div class="feature featfont">
              <!-- v-if="info.details_cate.indexOf(4) !== -1" -->
              <img src="~/assets/images/icon4.png" alt="" />
              支持定制
            </div>
          </div>
          <p class="capacity">
            日产能：
            <span>{{ info.pcs }} Pcs</span>
          </p>
          <p class="notice">商家备注：{{ info.remarks || '暂无' }}</p>
          <div class="num">
            <label>
              数量:
              <input type="number" @change="moqChange(info)" :min="info.moq" v-model="number" />
            </label>
            Pcs
          </div>
          <cart :id="id" :mid="info.mer_id" :number="number" />
        </div>
        <div class="shop-info">
          <div class="shop">
            <div class="Corporate">
              <h3>商家信息</h3>
              <div class="item certify">
                <img v-if="info.packmate === 1" style="margin-right:10px;" src="~/assets/images/certification.png" alt="已认证" />
                <img v-else style="margin-right:10px;" src="~/assets/images/not_certified.png" alt="未认证" />
                {{ info.packmate === 1 ? '已认证' : '未认证' }}
              </div>
            </div>

            <!-- <h3>商家信息</h3> -->
            <!-- {{ info.merchant }} -->
            <div class="info cursor" @click="goCompany(info.merchant.mer_id)">
              <div class="com-logo"><img class="object" :src="info.merchant && info.merchant.mer_avatar" alt="" /></div>
              <p class="company">{{ info.merchant && info.merchant.mer_name }}</p>
              <p v-if="info.create_time" style="display: flex; align-items: center">
                <img src="~/assets/images/settle-date.png" width="20" height="20" alt="" />
                <span style="margin-left: 10px">入驻时间：{{ info.create_time.substring(0, 4) }}年</span>
              </p>
              <p style="display: flex; align-items: center">
                <img src="~/assets/images/score-star.png" alt="" />
                <span style="margin-left: 10px">综合评分：{{ info.rate }}分</span>
              </p>
            </div>
          </div>
          <div class="approve" v-if="info.packmate && info.merchant.is_pack_mate">PackMate认证</div>
        </div>
      </div>
    </div>

    <div class="catetab" v-if="showTab">
      <van-tabs>
        <van-tab title="产品规格">
          <div class="content">
            <h3>产品规格</h3>
            <div class="table-box">
              <table border="0" cellpadding="0" cellspacing="0">
                <thead>
                  <tr>
                    <th>规格名称</th>
                    <th>规格值</th>
                    <th>规格名称</th>
                    <th>规格值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>材质</td>
                    <td>{{ info.material && info.material.title }}材质</td>
                    <td>形状</td>
                    <td>{{ info.thread_type }}形状</td>
                  </tr>
                  <tr>
                    <td>尺寸</td>
                    <td>{{ info.size_x }}mm*{{ info.size_y }}mm*{{ info.size_z }}mm</td>
                    <td>重量</td>
                    <td>{{ info.weight }}g</td>
                  </tr>
                  <tr>
                    <td>满口容量</td>
                    <td>{{ info.max_capacity }}ml</td>
                    <td>吐出量</td>
                    <td>{{ info.output_num }}ml</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </van-tab>
        <van-tab title="3D展示">
          <div class="content">
            <h3>3d动效</h3>
            <div class="pro-desc" v-html="info.content"></div>
          </div>
        </van-tab>
        <van-tab title="产品详情">
          <div class="content">
            <h3>产品详情</h3>
            <div class="pro-desc" v-html="info.content"></div>
          </div>
        </van-tab>
        <van-tab title="厂家信息">
          <div class="content">
            <h3>厂家信息</h3>
            <div class="shop-desc f16 cor666 mtp20">{{ (info.merchant && info.merchant.mer_info) || '信息完善中...' }}</div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Table from './Table';
import ShowImage from './common/ShowImage';
import Cart from './common/cart/Cart';
import { Tab, Tabs, Icon } from 'vant';
import { getProductsDe, collectPro } from '@/request/api';
import Vue from 'vue';
Vue.use(Tab)
  .use(Tabs)
  .use(Icon);

export default {
  name: 'CateDetails',
  props: {
    id: {
      type: String | Number
    },
    showTab: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Table,
    ShowImage,
    Cart
  },
  data() {
    return {
      info: {},
      number: '',
      isPackmate: false,
      url: window.location.href
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    moqChange(data) {
      if (this.number < data.moq) {
        this.number = data.moq;
        return this.$toastVant('数量不可低于起订量！');
      }
    },
    onCopy(e) {
      this.$toastVant.success('分享链接复制成功');
    },
    onError(e) {
      this.$message.error('抱歉，复制失败！');
    },
    goCompany(id) {
      let linkUrl = this.$router.resolve({
        name: 'CompanyHomeHome',
        params: {
          id
        }
      });
      window.open(linkUrl.href, '_blank');
    },
    getInfo() {
      getProductsDe(this.id).then(res => {
        this.info = res.data;
        localStorage.setItem('cate_name', res.data.cate_name);
        this.number = this.info.moq;
      });
    },
    collect() {
      let that = this;
      let data = {
        type_id: this.id,
        type: 1
      };
      collectPro(data)
        .then(res => {
          if (res.status === 200) {
            that.$toastVant(res.message);
            that.getInfo();
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>

<style scoped>
.pro-desc {
  padding: 30px 30px 40px;
  background: #fff;
}

.pro-desc .pro-name h3 {
  font-size: 24px;
  font-weight: 400;
  color: rgb(77, 77, 77);
  margin-bottom: 20px;
}

.pro-desc .pro-label a {
  display: inline-block;
  color: #fff;
  background: rgb(227, 139, 43);
  border-radius: 14px;
  padding: 6px 25px;
  margin-right: 13px;
}

.pro-desc .content {
  width: 100%;
  display: flex;
  margin-top: 33px;
}

.pro-desc .desc {
  flex: 1;
  font-size: 16px;
  color: #656565;
  margin-left: 40px;
  margin-right: 40px;
  margin-bottom: 40px;
  line-height: 24px;
}

.pro-desc .pro-features {
  margin: 16px 0;
  font-size: 14px;
  color: #959595;
}

.pro-desc .pro-features2 {
  display: flex;
  justify-content: space-between;
}

.pro-desc .pro-features .feature {
  float: left;
  margin-right: 48px;
}

.pro-desc .pro-features2 .feature {
  margin-right: 0;
}

.pro-desc .pro-features .feature img {
  margin-right: 4px;
  vertical-align: middle;
}

.pro-desc .featfont {
  margin-right: 10px;
}

.pro-desc .table-box {
  margin: 12px 0 20px;
}

.pro-desc table {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.pro-desc thead {
  color: #fff;
  background: #666;
  height: 42px;
  line-height: 42px;
  font-size: 16px;
}

.pro-desc thead th {
  padding: 0 36px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none;
  user-select: none;
}

.pro-desc tbody {
  background: #f3f4f7;
}

.pro-desc tbody td {
  padding: 16px 0 12px;
  text-align: center;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.pro-desc tbody td.price span {
  color: #969696;
  text-decoration: line-through;
}

.pro-desc .num {
  font-size: 14px;
  margin: 10px 0 20px;
}

.pro-desc .num input {
  width: 245px;
  height: 38px;
  border: 1px solid rgb(101, 101, 101);
  border-radius: 10px;
  margin: 0 10px;
  padding: 0 10px;
}

.pro-desc .shop-info {
  width: 208px;
  height: auto;
}

.pro-desc .shop-info .shop {
  color: #000;
  background: #fff;
  padding: 16px 8px;
  border: solid 1px #e48b2c;
}
.Corporate {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
}
.certify {
  display: flex;
  align-items: center;
  padding-bottom: 11px;
}
.pro-desc .shop-info .shop h3 {
  font-size: 18px;
  font-weight: bold;
  color: #e48b2c;
  background: #fff;
  padding-bottom: 11px;
}

.pro-desc .com-logo {
  width: 190px;
  height: 90px;
  margin-top: 12px;
}

.pro-desc .shop-info .shop p {
  font-size: 16px;
  margin-top: 12px;
}

.pro-desc .approve {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 0;
  text-align: center;
  color: #fff;
  background: #0085e8;
}

.pro-desc .heart,
.pro-desc .heart2 {
  position: relative;
  top: 2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 50px;
  background: url('~@/assets/images/shoucanglogo.png') -4px -3px;
}

.pro-desc .heart2 {
  background-position: -26px -3px;
}

.pro-desc .feature span {
  /* position: relative;
  top: -2px;
  left: 6px; */
  margin-left: 3px;
}

.pro-desc .feature a {
  display: flex;
  align-items: center;
}

.catetab {
  margin-top: 26px;
}

.catetab >>> .van-tabs__wrap {
  height: 60px;
}

.catetab >>> .van-tabs__nav {
  display: flex;
  height: 60px;
  background: #e38b2e;
}

.catetab >>> .van-tab {
  font-size: 16px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 0;
}

.catetab >>> .van-tab--active {
  background: #0085e8;
}

.catetab >>> .van-tabs__line {
  color: #fff;
  background: #0085e8;
  z-index: -1;
}

.catetab >>> .van-tabs__nav--line {
  padding: 0;
}

.catetab .active {
  color: #fff;
  background: #0085e8;
}

.catetab .content {
  padding: 30px 30px 50px;
  background: #fff;
}

.catetab .content h3 {
  color: #797979;
  font-size: 20px;
  font-weight: bold;
}

.catetab .content .pic-box {
  width: 100%;
  height: 553px;
  margin: 24px 0 48px;
}

.catetab table {
  width: 100%;
  margin-top: 30px;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.catetab td,
.catetab th {
  padding: 16px 0 12px;
  text-align: center;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
th {
  width: 200px !important;
}
</style>
